<!DOCTYPE html>
<html>

<head>
    <meta name="screen-orientation" content="portrait">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <title>印制公司2025年会</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: radial-gradient(ellipse at center, #800000 0%, #A52A2A 35%, #8B0000 100%);
            font-family: "Microsoft YaHei", sans-serif;
        }

        .wall {
            position: relative;
            width: 100%;
            margin: 0 auto;
            height: 100vh;
            z-index: 1;
            background: radial-gradient(ellipse at center, #8B0000 0%, #B22222 50%, #8B0000 100%);
        }

        .winner-info {
            position: fixed;
            width: 20%;
            height: 80vh;
            top: 50%;
            transform: translateY(-50%);
            padding: 20px;
            background: rgba(139, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            color: white;
            display: flex;
            flex-direction: column;
            gap: 20px;
            transition: all 0.3s ease;
            z-index: 1001;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(139, 0, 0, 0.4);
            border: 1px solid rgba(255, 200, 200, 0.3);
        }

        .winner-info h2 {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
            color: #FFD700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.3);
        }

        .winner-desc {
            left: 20px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .prize-desc {
            right: 20px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        .prize-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .prize-group h3 {
            color: #FFD700;
            font-size: 18px;
            margin-bottom: 10px;
            text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
        }

        .winner-numbers {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .winner-numbers span {
            display: inline-block;
            padding: 4px 8px;
            background: rgba(178, 34, 34, 0.4);
            border: 1px solid rgba(255, 215, 0, 0.4);
            border-radius: 4px;
            color: #FFD700;
            font-size: 14px;
            min-width: 30px;
            text-align: center;
        }

        .winner-info {
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 215, 0, 0.4) rgba(139, 0, 0, 0.2);
        }

        .winner-info::-webkit-scrollbar {
            width: 6px;
        }

        .winner-info::-webkit-scrollbar-track {
            background: rgba(139, 0, 0, 0.2);
        }

        .winner-info::-webkit-scrollbar-thumb {
            background-color: rgba(255, 215, 0, 0.4);
            border-radius: 3px;
        }

        #main {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 1;
        }

        #myCanvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            opacity: 0.95;
            mix-blend-mode: lighten;
        }

        .result-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1001;
            display: flex;
            gap: 10px;
        }

        #tools {
            display: none;
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1002;
            background: rgba(178, 34, 34, 0.3);
            backdrop-filter: blur(10px);
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid rgba(255, 215, 0, 0.4);
            box-shadow: 0 8px 32px rgba(139, 0, 0, 0.4);
            display: flex;
            gap: 8px;
            align-items: center;
            white-space: nowrap;
            flex-wrap: nowrap;
            /* 防止换行 */
            width: auto;
            /* 自适应宽度 */
            max-width: 90vw;
            /* 最大宽度为视窗宽度的90% */
        }

        #tools .pure-button {
            padding: 4px 10px;
            font-size: 13px;
            height: 28px;
            min-width: 40px;
            border-radius: 14px;
            display: inline-flex;
            /* 改为inline-flex */
            align-items: center;
            justify-content: center;
            background: rgba(178, 34, 34, 0.4);
            border: 1px solid rgba(255, 215, 0, 0.4);
            color: #FFD700;
            text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
            transition: all 0.3s ease;
            flex-shrink: 0;
            /* 防止按钮被压缩 */
            position: relative;
            /* 为激活状态的伪元素做准备 */
        }

        #tools .pure-button:hover {
            background: rgba(178, 34, 34, 0.6);
            border-color: rgba(255, 215, 0, 0.6);
            text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
            transform: translateY(-1px);
        }

        /* 激活状态样式 */
        #tools .pure-button.active {
            background: rgba(178, 34, 34, 0.8);
            border-color: rgba(255, 215, 0, 0.8);
            color: #FFD700;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
        }

        /* 添加底部指示条 */
        #tools .pure-button.active::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 2px;
            background: #fff;
            border-radius: 1px;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        }

        #tools input[type="number"] {
            width: 50px;
            height: 28px;
            text-align: center;
            padding: 4px;
            border-radius: 14px;
            border: 1px solid rgba(255, 215, 0, 0.4);
            background: rgba(255, 233, 233, 0.2);
            color: #FFD700;
            font-size: 13px;
            flex-shrink: 0;
            /* 防止输入框被压缩 */
        }

        /* 确保工具栏在任何情况下都保持水平排列 */
        #tools>* {
            flex: 0 0 auto;
            /* 防止子元素伸缩 */
        }

        @media (max-width: 768px) {
            #tools {
                padding: 6px 10px;
                gap: 6px;
            }

            #tools .pure-button {
                padding: 3px 8px;
                font-size: 12px;
                height: 24px;
                min-width: 35px;
            }
        }

        .tools {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            z-index: 1002;
            width: auto;
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
        }

        .tools .pure-button {
            display: inline-block;
            margin: 5px;
            padding: 10px 15px;
            text-align: center;
            min-width: 50px;
        }

        .pure-button {
            margin: 0 5px;
            padding: 8px 15px;
            border-radius: 5px;
            font-size: 14px;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .result {
            position: fixed;
            /* width: 80%; */
            max-height: 70vh;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 20px;
            display: none;
            z-index: 1010;
            background: rgba(139, 0, 0, 0.95);
            border-radius: 20px;
            border: 2px solid rgba(255, 215, 0, 0.8);
            box-shadow: 0 0 30px rgba(139, 0, 0, 0.5);
            overflow-y: auto;
            backdrop-filter: blur(10px);
        }

        .result-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            padding: 10px;
        }

        .result span {
            display: inline-block;
            font-size: 32px;
            line-height: 1.5;
            color: #FFD700;
            background: rgba(178, 34, 34, 0.7);
            border-radius: 15px;
            padding: 15px 30px;
            border: 2px solid rgba(255, 215, 0, 0.6);
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
            animation: resultShow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            white-space: nowrap;
            min-width: 200px;
        }

        .result .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid #FFD700;
            background: rgba(178, 34, 34, 0.8);
            color: #FFD700;
            font-size: 20px;
            line-height: 26px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .result .close-btn:hover {
            transform: rotate(90deg);
            background: rgba(178, 34, 34, 1);
        }

        @keyframes resultShow {
            from {
                transform: scale(0.8);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .mask {
            pointer-events: none;
        }

        .mask::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(139, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 1005;
        }

        .toolbar {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1020;
        }

        button,
        input,
        optgroup,
        select,
        textarea {
            color: inherit;
            font: inherit;
            margin: 0;
            border: none;
        }

        button {
            overflow: visible;
        }

        button,
        select {
            text-transform: none;
        }

        button,
        html input[type=button],
        input[type=reset],
        input[type=submit] {
            -webkit-appearance: button;
            -moz-appearance: button;
            appearance: button;
            cursor: pointer;
        }

        .pure-button {
            display: inline-block;
            zoom: 1;
            line-height: normal;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .pure-button {
            font-family: inherit;
            font-size: 100%;
            padding: .5em 1em;
            color: #444;
            color: rgba(0, 0, 0, .8);
            border: 0 rgba(0, 0, 0, 0);
            background-color: #E6E6E6;
            text-decoration: none;
            border-radius: 2px;
        }

        .pure-button:focus {
            outline: 0
        }

        .pure-button-hover,
        .pure-button:hover,
        .pure-button:focus {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, .05)), to(rgba(0, 0, 0, .1)));
            background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
            background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .1));
            background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
            background-image: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
        }

        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65);
        }

        .button-error {
            background: rgb(202, 60, 60);
        }

        .button-warning {
            background: rgb(223, 117, 20);
        }

        .button-secondary {
            background: rgb(66, 184, 221);
        }

        .result-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1001;
            display: flex;
            gap: 10px;
        }

        .result-btn a {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background: rgba(178, 34, 34, 0.3);
            color: #FFD700;
            text-decoration: none;
            border-radius: 20px;
            backdrop-filter: blur(8px);
            transition: all 0.3s ease;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 215, 0, 0.4);
            text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
        }

        .result-btn a:hover {
            background: rgba(178, 34, 34, 0.5);
            border-color: rgba(255, 215, 0, 0.6);
            text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
            transform: translateY(-2px);
        }

        .result-btn a:active {
            transform: translateY(0);
        }

        .result-btn a i {
            margin-right: 6px;
            font-size: 16px;
        }

        @media (max-width: 768px) {
            .result-btn {
                top: 10px;
                right: 10px;
            }

            .result-btn a {
                padding: 6px 12px;
                font-size: 12px;
            }
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .loading-content {
            background: rgba(255, 255, 255, 0.9);
            padding: 20px 40px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 音乐控制按钮样式 */
        #musicControl {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            width: auto;
            height: 40px;
            padding: 0 15px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 20px;
            /* 增加按钮之间的间距 */
            transition: all 0.3s ease;
        }

        #musicControl i {
            color: #FFD700;
            font-size: 16px;
            transition: all 0.3s ease;
            cursor: pointer;
            padding: 8px;
            /* 增加可点击区域 */
        }

        #musicControl i:hover {
            transform: scale(1.2);
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        #playPause {
            font-size: 20px !important;
            /* 让播放/暂停按钮大一点 */
        }

        #musicControl:hover {
            background: rgba(255, 255, 255, 0.3);
            padding: 0 20px;
            /* 悬停时略微展开 */
        }

        /* 修改旋转动画的应用对象 */
        #playPause.playing {
            animation: rotate 5s linear infinite;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body>
    <audio id="bgMusic" loop>
        <source src="music/background.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放。
    </audio>
    <audio id="rollSound" loop>
        <source src="music/rolling.mp3" type="audio/mpeg">
    </audio>

    <div id="musicControl" title="背景音乐">
        <i class="fas fa-step-backward" id="prevTrack"></i>
        <i class="fas fa-music" id="playPause"></i>
        <i class="fas fa-step-forward" id="nextTrack"></i>
    </div>

    <div class="winner-info winner-desc">
        <h2>中奖号码</h2>
        <div class="content" id="winners"></div>
    </div>

    <div id="main" class="wall">
        <div class="toolbar">
            <a href="#" id="toggleTools"><i class="fas fa-cog"></i>工具栏</a>
        </div>
    </div>

    <div id="result" class="result">
        <div class="close-btn">&times;</div>
        <div class="result-wrapper"></div>
    </div>

    <div id="tools" class="tools">

        <input type="number" class="pure-button" v-model="prizeCount" :value="prizeCount" readonly="1" />
        <button v-for="(value,index) in btns" @click="onClick(value.code, value.count, index)" class="pure-button"
            :class="{ 'button-error': prize == value.code}">{{value.name}}</button>
        <button class="pure-button" @click="toggle" :class="{'button-secondary': !running,
               'button-success': running}">{{running?'停!':'开始'}}</button>
        <button class="pure-button button-warning" v-if="showClose" @click="close">关闭</button>
        <button class="pure-button button-warning" @click="reset">重置</button>
    </div>
    <div class="loading-overlay">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <div class="loading-text">正在加载数据，请稍候...</div>
        </div>
    </div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/tagcanvas.js"></script>
    <script type="text/javascript">
        (function () {
            var choosed = JSON.parse(localStorage.getItem('choosed')) || {};
            // 初始化或获取可用号码
            var availableNumbers = JSON.parse(localStorage.getItem('availableNumbers'));
            if (!availableNumbers) {
                availableNumbers = Array.from({ length: 100 }, (_, i) => i + 1);
                localStorage.setItem('availableNumbers', JSON.stringify(availableNumbers));
            }

            var speed = function () {
                return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)];
            };
            var getKey = function (item) {
                return item.district + '-' + item.name;
            };

            // 生成标签
            var createHTML = function () {
                var html = ['<ul id="tags">'];
                if(availableNumbers==undefined || availableNumbers.length==0){
                    return html.push('<li><a href="#" style="color: red;">没有可用号码</a></li>');
                }
                availableNumbers.forEach(number => {
                    var key = 'number-' + number;
                    var color = 'white';
                    if (choosed[key] && choosed[key].number == number) {
                        console.log('choosed: ' + number)
                        color = 'yello';
                    }
                    html.push('<li><a href="#" style="color: ' + color + ';">真抓实干-' + number + '</a></li>');
                });
                html.push('</ul>');
                return html.join('');
            };

            // 加载3D球
            var loadBall = function () {
                // 显示加载提示
                $(".loading-overlay").css("display", "flex");
                try {
                    console.log('tag count:', count)
                    // 生成HTML标签
                    canvas.innerHTML = createHTML();

                    // 初始化3D球
                    TagCanvas.Start('myCanvas', 'tags', {
                        textColour: '#FFD700',
                        initial: speed(),
                        dragControl: 1,
                        textHeight: 14
                    });
                    console.log('TagCanvas initialized successfully');

                } catch (e) {
                    console.error('3D球初始化失败:', e);
                    alert('3D球初始化失败，请刷新页面重试');
                } finally {
                    // 隐藏加载提示
                    $(".loading-overlay").hide();
                }
            }

            // 抽奖
            var lottery = function (prize, count) {
                // 显示加载动画
                $(".loading-overlay").css("display", "flex");

                try {
                    // 从localStorage获取可用号码
                    var availableNumbers = JSON.parse(localStorage.getItem('availableNumbers')) || [];
                    // 从localStorage获取已有的中奖记录
                    var existingChoosed = JSON.parse(localStorage.getItem('choosed')) || {};

                    // 检查该奖项是否已经抽过
                    var existingWinners = Object.values(existingChoosed).filter(winner => winner.prize === prize);
                    if (existingWinners.length > 0) {
                        $('#result').css('display', 'block')
                            .find('.result-wrapper')
                            .html('<span>该奖项已经抽取过，请选择其他奖项</span>');
                        return;
                    }

                    // 检查是否还有足够的号码
                    if (availableNumbers.length < count) {
                        $('#result').css('display', 'block')
                            .find('.result-wrapper')
                            .html('<span>剩余号码不足，无法抽奖</span>');
                        return;
                    }

                    // 随机抽取指定数量的号码
                    var result = [];
                    while (result.length < count && availableNumbers.length > 0) {
                        var randomIndex = Math.floor(Math.random() * availableNumbers.length);
                        var number = availableNumbers.splice(randomIndex, 1)[0];

                        // 确保号码没有被使用过
                        var key = 'number-' + number;
                        if (!existingChoosed[key]) {
                            result.push(number);
                        }
                    }

                    // 排序结果
                    result.sort((a, b) => a - b);

                    // 更新已选中的号码（追加模式）
                    result.forEach(function (num) {
                        var key = 'number-' + num;
                        existingChoosed[key] = {
                            number: num,
                            prize: prize,
                            timestamp: new Date().getTime()
                        };
                    });

                    // 保存更新后的状态到localStorage
                    localStorage.setItem('choosed', JSON.stringify(existingChoosed));
                    localStorage.setItem('availableNumbers', JSON.stringify(availableNumbers));

                    // 格式化显示结果
                    var formattedResult = result.map(function (num) {
                        return num < 10 ? '0' + num : '' + num;
                    });

                    // 更新中奖名单显示
                    updateWinnersList();

                    // 显示结果
                    showResult(formattedResult);

                    // 重新加载球以更新颜色
                    loadBall();

                } catch (e) {
                    console.error('抽奖出错:', e);
                    alert('抽奖过程出现错误，请重试');
                } finally {
                    // 隐藏加载动画
                    $(".loading-overlay").hide();
                }
            };

            document.getElementById('toggleTools').addEventListener('click', function (e) {
                e.preventDefault();
                var toolsDiv = document.getElementById('tools');
                if (toolsDiv.style.display === 'none') {
                    toolsDiv.style.display = 'block';
                } else {
                    toolsDiv.style.display = 'none';
                }
            });
            // 更新中奖名单显示
            function updateWinnersList() {
                var choosed = JSON.parse(localStorage.getItem('choosed')) || {};
                var winners = document.getElementById('winners');
                var html = '';

                // 按奖项分类
                var prizeMap = {
                    1: { name: '一等奖', winners: [] , produt: 'SKⅡ中样一套'},
                    2: { name: '二等奖', winners: [] , produt: '四件套1套'},
                    3: { name: '三等奖', winners: [] , produt: '寇美颜华面膜1套'},
                    4: { name: '四等奖', winners: [] , produt: '碧然堂面膜+素颜霜'},
                    5: { name: '五等奖', winners: [] , produt: '碧然堂面膜'},
                };

                // 整理数据
                Object.keys(choosed).forEach(function (key) {
                    var winner = choosed[key];
                    if (prizeMap[winner.prize]) {
                        prizeMap[winner.prize].winners.push(winner.number);
                    }
                });

                // 生成HTML
                Object.keys(prizeMap).sort().forEach(function (prize) {
                    if (prizeMap[prize].winners.length > 0) {
                        html += `<div class="prize-group">
                            <h3>${prizeMap[prize].name}【${prizeMap[prize].produt}】</h3>
                            <div class="winner-numbers">
                                ${prizeMap[prize].winners.sort((a, b) => a - b).map(num =>
                            `<span>${num < 10 ? '0' + num : num}</span>`
                        ).join('')}
                            </div>
                        </div>`;
                    }
                });

                winners.innerHTML = html;
            }

            var canvas = document.createElement('canvas');
            canvas.id = 'myCanvas';
            // 设置更大的画布尺寸以确保3D效果明显
            canvas.width = Math.min(window.innerWidth, 1024);
            canvas.height = Math.min(window.innerHeight, 768);
            document.getElementById('main').appendChild(canvas);

            // 添加窗口大小变化的监听
            window.addEventListener('resize', function () {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                // 重新初始化 TagCanvas
                loadBall();
            });

            var vm = new Vue({
                el: '#tools',
                data: {
                    prize: 5,
                    prizeCount: 0,
                    running: false,
                    showClose: false,
                    btns: [
                        { name: '五等奖', count: 10, code: 5 },
                        { name: '四等奖', count: 7, code: 4 },
                        { name: '三等奖', count: 5, code: 3 },
                        { name: '二等奖', count: 3, code: 2 },
                        { name: '一等奖', count: 1, code: 1 }
                    ]
                },
                mounted() {
                    // 初始化时从localStorage获取可用号码数量
                    count = JSON.parse(localStorage.getItem('availableNumbers')).length;
                },
                methods: {
                    reset: function () {
                        if (confirm('确定要重置么？所有之前的抽奖历史将被清除！')) {
                            // 重置所有状态
                            choosed = {};
                            availableNumbers = Array.from({ length: 100 }, (_, i) => i + 1);

                            // 更新localStorage
                            localStorage.removeItem('choosed');
                            localStorage.setItem('availableNumbers', JSON.stringify(availableNumbers));

                            // 重新加载页面
                            location.reload(true);
                        }
                    },
                    onClick: function (num, count, index) {
                        $('#result').css('display', 'none');
                        $('#main').removeClass('mask');
                        this.prize = num;
                        this.prizeCount = count;
                        this.selected = num;

                        // 加载3D球
                        loadBall();
                    },
                    toggle: function () {
                        const rollSound = document.getElementById('rollSound');

                        if (this.running) {
                            TagCanvas.SetSpeed('myCanvas', speed());
                            lottery(this.prize, this.prizeCount);
                            // 停止音效，恢复背景音乐
                            rollSound.pause();
                            rollSound.currentTime = 0;
                            if (isMusicPlaying) {
                                bgMusic.play();
                            }                            
                        } else {
                            $('#result').css('display', 'none');
                            $('#main').removeClass('mask');
                            TagCanvas.SetSpeed('myCanvas', [5, 1]);
                            // 暂停背景音乐，播放音效
                            bgMusic.pause();
                            rollSound.volume = 0.5;
                            rollSound.play();                            
                        }
                        this.running = !this.running;
                    },
                    close: function () {
                        this.showClose = false;
                        $('#result').css('display', 'none');
                        $('#main').removeClass('mask');
                    }
                }
            });

            // 添加按钮点击激活状态
            document.querySelectorAll('#tools .pure-button').forEach(button => {
                button.addEventListener('click', function () {
                    // 移除其他按钮的激活状态
                    document.querySelectorAll('#tools .pure-button').forEach(btn => {
                        btn.classList.remove('active');
                    });
                    // 添加当前按钮的激活状态
                    this.classList.add('active');
                });
            });

            // 添加关闭结果显示的功能
            document.querySelector('.result .close-btn').addEventListener('click', function () {
                document.getElementById('result').style.display = 'none';
                document.getElementById('main').classList.remove('mask');
            });

            // 修改显示结果的代码
            function showResult(result) {
                var resultDiv = document.getElementById('result');
                var wrapper = resultDiv.querySelector('.result-wrapper');
                wrapper.innerHTML = '';

                result.forEach(function (item) {
                    var span = document.createElement('span');
                    span.textContent = "真抓实干-"+item;
                    wrapper.appendChild(span);
                });

                resultDiv.style.display = 'block';
                document.getElementById('main').classList.add('mask');
            }

            // 音乐控制相关代码
            const bgMusic = document.getElementById('bgMusic');
            const musicControl = document.getElementById('musicControl');
            const playPauseBtn = document.getElementById('playPause');
            const prevBtn = document.getElementById('prevTrack');
            const nextBtn = document.getElementById('nextTrack');
            let isMusicPlaying = false;

            // 音乐列表
            const musicList = [
                'music/background.mp3',
                'music/track2.mp3',
                'music/track3.mp3'
                // 添加更多音乐文件
            ];

            let currentTrack = 0;

            // 播放指定音乐
            function playTrack(index) {
                currentTrack = index;
                bgMusic.src = musicList[currentTrack];
                bgMusic.play().then(function () {
                    isMusicPlaying = true;
                    playPauseBtn.classList.add('playing');
                }).catch(function (error) {
                    console.log("音乐播放失败:", error);
                });
            }
            // 播放/暂停控制
            playPauseBtn.addEventListener('click', function () {
                if (isMusicPlaying) {
                    bgMusic.pause();
                    playPauseBtn.classList.remove('playing');
                } else {
                    bgMusic.play().catch(function (error) {
                        console.log("音乐播放失败:", error);
                    });
                    playPauseBtn.classList.add('playing');
                }
                isMusicPlaying = !isMusicPlaying;
            });

            // 上一曲
            prevBtn.addEventListener('click', function (e) {
                e.stopPropagation();
                currentTrack = (currentTrack - 1 + musicList.length) % musicList.length;
                playTrack(currentTrack);
            });

            // 下一曲
            nextBtn.addEventListener('click', function (e) {
                e.stopPropagation();
                currentTrack = (currentTrack + 1) % musicList.length;
                playTrack(currentTrack);
            });

            // 音乐播放结束时自动播放下一曲
            bgMusic.addEventListener('ended', function () {
                currentTrack = (currentTrack + 1) % musicList.length;
                playTrack(currentTrack);
            });

            // 页面加载完成后尝试自动播放音乐
            document.addEventListener('DOMContentLoaded', function () {
                bgMusic.volume = 0.5; // 设置音量为50%
                bgMusic.play().then(function () {
                    isMusicPlaying = true;
                    musicControl.classList.add('playing');
                }).catch(function (error) {
                    console.log("自动播放失败:", error);
                });
                loadBall();
                updateWinnersList();  // 添加这行
                console.log('loadBall...');
            });
        })();
    </script>
</body>

</html>